$(function() {
	//alert("hi");
  
  ///替换原有组合music
    $("#li").hide();
  var bag=JSON.parse($('#bag').text());
  display_bag(bag);



      function submit_form_next(e) {
      var next_user_level=parseInt($('#user_level').text());
      next_user_level=next_user_level+1;
      $("#user_level").text(next_user_level.toString());
       var path ="/stemmode/jq/"+next_user_level.toString();
       var myHeaders = new Headers();
     ///  console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })        
  .then(function(response) {

    return response.json();
  })
.then(function(myJson){
  $("#bag").text(myJson);
  console.log(JSON.parse(myJson));
  $('.expand_list_group').remove();

 display_bag(JSON.parse(myJson));
});



};
    // 绑定click事件
    $('#next').bind('click', submit_form_next);

      function submit_form_previous(e) {
      var next_user_level=parseInt($('#user_level').text());
      next_user_level=next_user_level-1;
      $("#user_level").text(next_user_level.toString());
       var path ="/stemmode/jq/"+next_user_level.toString();
       var myHeaders = new Headers();
     ///  console.log(next_user_level.toString());
       fetch(path, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })        
  .then(function(response) {

    return response.json();
  })
.then(function(myJson){
  $("#bag").text(myJson);
  console.log(JSON.parse(myJson));
  $('.expand_list_group').remove();

 display_bag(JSON.parse(myJson));
});



};
    // 绑定click事件
    $('#previous').bind('click', submit_form_previous);

  

function display_bag(bag){
  //combine_Music();

  var cloneCount = 0;
  //console.log(JSON.stringify(bag));
  bag.forEach(function(item){
    var path ="learnmode/jq/"+item.toString();
    
    var id_curr= 'li'+ cloneCount.toString();
    $("#li").clone().attr('id',id_curr).show().appendTo("ul");
    $('#'+id_curr).attr('class','expand_list_group')
    $('#'+id_curr+' '+'.wordMusic').attr('id',(cloneCount.toString()));
    //

    //

  fetch(path)       
  .then(function(response) {
    return response.json();
  })
  .then(function (myJson){
        $('#'+id_curr+' '+'#user_level').text(item.toString())
        var word=myJson.word;
        $('#'+id_curr+' '+'#word').text(myJson.word);
        $('#'+id_curr+' '+'#word_tip').text(myJson.word_tip);
        $('#'+id_curr+' '+'#word_def').text(myJson.word_def); 
        $('#'+id_curr+' '+'.wordMusic').attr('src',myJson.wordMusic);
       // console.log(myJson.wordMusic);
        $('#'+id_curr+' '+'#image_a').attr('src',myJson.image_a);
       $('#'+id_curr+' '+'#image_b').attr('src',myJson.image_b);
       $('#'+id_curr+' '+'#clipart_c').attr('src',myJson.clipart_c);
       $('#'+id_curr+' '+'#clipart_d').attr('src',myJson.clipart_d);
       var dict_mw="https://www.merriam-webster.com/dictionary/"+word;
       $('#'+id_curr+' '+'#dict_mw').attr('href',dict_mw);
        var dict_vo="https://www.vocabulary.com/dictionary/"+word;
       //console.log(dict_mw);
       $('#'+id_curr+' '+'#dict_vo').attr('href',dict_vo);
        var dict_bi="https://cn.bing.com/dict/search?q="+word;
       //console.log(dict_mw);
       $('#'+id_curr+' '+'#dict_bi').attr('href',dict_bi);
//


//


       return word

} )
  //
            if (cloneCount>0){
            var pri_li = 'li'+ (cloneCount-1).toString();
            
            $('#'+pri_li+' '+'.wordMusic').bind( 'ended',function () {
             $('#'+pri_li+' '+'.wordMusic').attr('loop',"false");
             $('#'+pri_li+' '+'.wordMusic')[0].pause();
       
             //$(".wordMusic")[song_number+1].load();
             $('#'+id_curr+' '+'.wordMusic')[0].play();
             console.log('link:'+pri_li.toString()+" "+id_curr.toString());
           });

          };
 // console.log($('#'+pri_li+' '+'.wordMusic'));

 cloneCount=cloneCount+1;

});//end for each

};//end display bag

  //display_bag(bag);

})

